<template>
  <div id="tmpl">
    <ul class="mui-table-view">
      <li v-for="(item,index) in list" :key="index" class="mui-table-view-cell mui-media">
        <router-link v-bind="{to:'/news/newsinfo/' + item.id }">
          <img class="mui-media-object mui-pull-left" :src="item.img_url">
          <div class="mui-media-body">
            {{ item.title }}
            <p class='mui-ellipsis'>{{ item.zhaiyao }}</p>
            <div class="ft">
              <span>发表时间: {{ item.add_time | date("YYYY-MM-DD HH:mm:ss") }}</span>
              <span class="click">{{ item.click }}</span>
            </div>
          </div>
        </router-link>
      </li>

    </ul>
  </div>
</template>

<script>
  import { Toast } from "mint-ui";
  export default {
    data() {
      return {
        list: []
      };
    },
    created() {
      this.getNewslist();
    },
    methods: {
      getNewslist() {
        var url = this.$common.apidomain + "/api/getnewslist";
        this.$http.get(url).then(function(res) {
          var data = res.body;
          if (data.status != 0) {
            Toast(data.message);
            return;
          }

          this.list = data.message;
        });
      }
    }
  };
</script>

<style scoped>
  .ft{
      font-size: 14px;
      color: #0094ff;
      margin-top: 1em;
  }

  .mui-table-view .mui-media-object{
    max-width: 80px;
    line-height: 80px;
    height: 80px;
  }
  .click{
    margin-left: 20px;
  }
</style>